<template>
  <div class="financial">
    <div class="center-title">
      <img src="../../assets/img/nlzx-title-bg.png" alt="">
      <span>金融服务中心</span>
      <img src="../../assets/img/nlzx-title-bg.png" alt="">
    </div>
    <div class="center-sub-title">Financial Services Center</div>
    <div class="center-box">
      <div class="financial-item" v-for="(item, index) in financial" :key="index" @click="goOtherPage(item.url)">
        <div class="financial-item-header">
          <div class="financial-item-header-logo">
            <img :src="item.logo" alt="">
          </div>
          <div class="financial-item-header-name">
            <span class="financial-item-header-name-text">{{item.name}}</span>
            <span class="financial-item-header-name-tags" v-for="(tags, tagIndex) in item.tags" :key="tagIndex">{{tags}}</span>
          </div>
          <div class="financial-item-header-content">
            <div class="fw-item">
              <div class="fw-item-value">{{item.llfw}}</div>
              <div class="fw-item-name">
                <img src="../../assets/img/fwzx-fw-icon-1.png" alt="">
                利率范围
              </div>
            </div>
            <div class="fw-item">
              <div class="fw-item-value">{{item.qxfw}}<span class="fw-item-value-unit">月</span></div>
              <div class="fw-item-name">
                <img src="../../assets/img/fwzx-fw-icon-2.png" alt="">
                期限范围
              </div>
            </div>
            <div class="fw-item">
              <div class="fw-item-value">{{item.edfw}}<span class="fw-item-value-unit">万元</span></div>
              <div class="fw-item-name">
                <img src="../../assets/img/fwzx-fw-icon-3.png" alt="">
                额度范围
              </div>
            </div>
          </div>
        </div>
        <div class="financial-item-bogy">
          <div class="financial-item-bogy-item financial-item-bogy-item-1">
            金融机构：{{item.jrjg}}
          </div>
          <div class="financial-item-bogy-item financial-item-bogy-item-2">
            适用对象：{{item.sydx}}
          </div>
          <div class="financial-item-bogy-item financial-item-bogy-item-3">
            服务区域：{{item.fwqy}}
          </div>
          <div class="financial-item-bogy-item financial-item-bogy-item-4">
            产品简介：{{item.desc}}
          </div>
        </div>
      </div>
    </div>
    <div class="more-box">
      <div class="more-btn more-btn-more" @click="goOtherPage('https://www.celoan.cn/')">更多服务</div>
      <div class="more-btn more-btn-heng" @click="goOtherPage('https://www.chinahdex.com/#')">横交所</div>
    </div>
  </div>
</template>

<script >

export default {
  name: "FinancialServices",
  setup() {
    const financial = [
      {
        name: '某某类型的金融服务',
        logo: require('../../assets/img/fwzx-logo-1.png'),
        tags: ['某某标签'],
        llfw: '3.65%',
        qxfw: '12',
        edfw: '1-2000',
        jrjg: '农业银行某某支行',
        sydx: '企业',
        fwqy: '某某区',
        url: 'http://www.icbc.com.cn/icbc/',
        desc: '批次贷是由我行与某某市中小微企业政策性融资担保基金管理中心签署《批次担保合作协议》，我行在协议约定范围内对小微企业先行审批、放款，管理中心在约定期限内接受事后备案，并在其代偿上限额度内承担保证责任的普惠信贷业务。'
      },
      {
        name: '某某类型的金融服务',
        logo: require('../../assets/img/fwzx-logo-2.png'),
        tags: ['某某标签'],
        llfw: '3.65%',
        qxfw: '12',
        edfw: '1-2000',
        jrjg: '农业银行某某支行',
        sydx: '企业',
        fwqy: '某某区',
        url: 'https://www.spdb.com.cn/',
        desc: '批次贷是由我行与某某市中小微企业政策性融资担保基金管理中心签署《批次担保合作协议》，我行在协议约定范围内对小微企业先行审批、放款，管理中心在约定期限内接受事后备案，并在其代偿上限额度内承担保证责任的普惠信贷业务。'
      },
      {
        name: '某某类型的金融服务',
        logo: require('../../assets/img/fwzx-logo-3.png'),
        tags: ['某某标签'],
        llfw: '3.65%',
        qxfw: '12',
        edfw: '1-2000',
        jrjg: '农业银行某某支行',
        sydx: '企业',
        fwqy: '某某区',
        url: 'https://www.boc.cn/',
        desc: '批次贷是由我行与某某市中小微企业政策性融资担保基金管理中心签署《批次担保合作协议》，我行在协议约定范围内对小微企业先行审批、放款，管理中心在约定期限内接受事后备案，并在其代偿上限额度内承担保证责任的普惠信贷业务。'
      },
      {
        name: '某某类型的金融服务',
        logo: require('../../assets/img/fwzx-logo-4.png'),
        tags: ['某某标签'],
        llfw: '3.65%',
        qxfw: '12',
        edfw: '1-2000',
        jrjg: '农业银行某某支行',
        sydx: '企业',
        fwqy: '某某区',
        url: 'http://www.bankcomm.com/BankCommSite/default.shtml',
        desc: '批次贷是由我行与某某市中小微企业政策性融资担保基金管理中心签署《批次担保合作协议》，我行在协议约定范围内对小微企业先行审批、放款，管理中心在约定期限内接受事后备案，并在其代偿上限额度内承担保证责任的普惠信贷业务。'
      }
    ]
    return {
      financial
    }
  },
  methods: {
    goOtherPage(url) {
      if (url) {
        window.open(url)
      }
    }
  }
}
</script>

<style scoped lang="less">
.financial {
  background: #FAFAFA;

  .center-title {
    padding-top: 40px;
    font-size: 32px;
    color: #313233;
    letter-spacing: 1.92px;
    font-weight: 500;

    span {
      margin: 0 10px;
      vertical-align: middle;
    }

    img {
      vertical-align: middle;
      width: 24px;
    }
  }

  .center-sub-title {
    margin-top: 10px;
    font-size: 16px;
    color: #B0B5B8;
    letter-spacing: 0.96px;
    text-align: center;
    font-weight: 400;
  }

  .center-box {
    width: 1200px;
    margin: 0 auto;
    padding: 40px 0 0;

    .financial-item {
      margin-bottom: 24px;
      padding: 24px;
      border: 1px solid rgba(200,202,204,1);
      background: #FFFFFF;
      cursor: pointer;

      &:hover {
        box-shadow: 0px 8px 16px 0px rgba(61,42,36,0.12);
      }
      .financial-item-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        .financial-item-header-logo {
          width: 400px;

          img {
            height: 54px;
          }
        }

        .financial-item-header-name {
          flex: 1;
          line-height: 54px;
          .financial-item-header-name-text {
            vertical-align: middle;
            font-size: 24px;
            color: #313233;
            letter-spacing: 1.44px;
            line-height: 32px;
            font-weight: 500;
          }

          .financial-item-header-name-tags {
            vertical-align: middle;
            margin-left: 20px;
            padding:4px;
            background: #FA8C16;
            border-radius: 4px;
            font-size: 16px;
            color: #FFFFFF;
            letter-spacing: 0.96px;
            text-align: justify;
            line-height: 24px;
            font-weight: 400;
          }
        }

        .financial-item-header-content {
          display: flex;
          justify-content: space-between;
          width: 400px;
          margin-left: 20px;

          .fw-item {
            .fw-item-value {
              margin-bottom: 5px;
              font-size: 20px;
              letter-spacing: 1.2px;
              text-align: center;
              line-height: 24px;
              font-weight: 500;

              .fw-item-value-unit {
                margin-left: 10px;
                font-size: 16px;
                color: #626566;
                letter-spacing: 0.96px;
                line-height: 24px;
                font-weight: 400;
              }
            }

            &:nth-child(1n) {
              color: #237804;
            }
            &:nth-child(2n) {
              color: #FA8C16;
            }
            &:nth-child(3n) {
              color: #D4380D;
            }
            .fw-item-name {
              font-size: 16px;
              color: #626566;
              letter-spacing: 0.96px;
              text-align: justify;
              line-height: 24px;
              font-weight: 400;

              img {
                vertical-align: top;
                width: 24px;
              }
            }
          }
        }
      }

      .financial-item-bogy {
        display: flex;
        flex-wrap: wrap;

        .financial-item-bogy-item {
          margin: 5px 0;
          font-size: 16px;
          color: #626566;
          letter-spacing: 0.96px;
          text-align: justify;
          line-height: 24px;
          font-weight: 400;

          &.financial-item-bogy-item-1 {
            width: 400px;
          }

          &.financial-item-bogy-item-2 {
            width: 200px;
          }

          &.financial-item-bogy-item-3 {
            width: 400px;
          }

          &.financial-item-bogy-item-4 {
            width: 100%;
          }
        }
      }
    }
  }

  .more-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 50px;
    .more-btn {
      position: relative;
      margin: 0 12px;
      width: 156px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      &:after {
        position: absolute;
        content: '→';
        margin-left: 10px;
        font-size: 12px;
      }

      &.more-btn-more {
        background: rgba(216,216,216,0.00);
        border: 1px solid rgba(200,202,204,1);
        border-radius: 4px;
        font-size: 16px;
        color: #313233;
        text-align: center;
      }
      &.more-btn-heng {
        background: #3D2A24;
        border-radius: 4px;
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
      }
    }
  }
}

</style>
